<template>
  <div class="empty-state">
    <div class="empty-icon">
      <el-icon v-if="icon">
        <component :is="icon" />
      </el-icon>
      <el-icon v-else><DocumentCopy /></el-icon>
    </div>
    <div class="empty-content">
      <h3 class="empty-title">{{ title || '暂无数据' }}</h3>
      <p v-if="description" class="empty-description">{{ description }}</p>
    </div>
    <div v-if="$slots.default || action" class="empty-actions">
      <slot>
        <el-button v-if="action" type="primary" @click="action">
          {{ actionText || '刷新' }}
        </el-button>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Component } from 'vue'
import { DocumentCopy } from '@element-plus/icons-vue'

defineProps<{
  title?: string
  description?: string
  icon?: Component
  action?: () => void
  actionText?: string
}>()
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  animation: fadeInUp var(--transition-base) var(--ease-out);
}

.empty-icon {
  font-size: 4rem;
  color: var(--gray-400);
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
}

.empty-content {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.empty-title {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.empty-description {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.empty-actions {
  display: flex;
  gap: var(--spacing-2);
}
</style>
